@import '@/assets/css/common/var.scss';
$font-size-base:"14px";
$prefix:".em-checkbox";
#{$prefix} {
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    display: inline-block;
    line-height: 1;
    position: relative;
    vertical-align: text-bottom;




    //由于input的样式无法修改 所以隐藏掉
    &-input {
      position: absolute;
      left: 0;
      z-index: 1;
      cursor: pointer;
      opacity:0;
      top: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
      & + span {
          color: #000000;
          cursor: not-allowed;
      }
    }

    &-checked,
    &-indeterminate{
      border-color:red;
    }
    &-checked:after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 1px;
      border: 2px solid red;
      content: '';
      animation: emCheckboxEffect 0.36s ease-in-out;
      animation-fill-mode: both;  //向前和向后填充模式都被应用。
      // visibility: hidden;      //是否隐藏动画 
    }
    &-inner {
      position: relative;
      top: 0;
      left: 0;
      display: block;
      width: $checkbox-size;        //多选框的宽度
      height: $checkbox-size;        //多选框的高度
      border: 1px solid #1890ff;  //多选框边框的颜色
      border-radius:1px;
      background-color: #ffffff;  //多选框内部的颜色
      transition: all .3s;

      &:after {
        transform: rotate(45deg) scale(0);
        position: absolute;
        left: 40%;                    //多选框内部对勾的位置 X
        top: 20%;                    //多选框内部对勾的位置 Y
        display: table;
        width: 100px;
        height: 100px;
        border: 2px solid var(--pseudoElementBackgroundColor) !important;
        border-top: 0 !important;
        border-left: 0 !important;
        content: ' ';
        transition: all .1s  cubic-bezier(0.71, -0.46, 0.88, 0.6);
        box-sizing: border-box;
        width: 4px;     //前对勾的长度
        height: 8px;    //后对勾的长度
      }
    } 
    //选中时边框内部的颜色
    &-checked{
      #{$prefix}-inner{
        background-color: #1890ff;  //选中时多选框内部的颜色
        border-color: #1890ff ;     //选中时多选框边框的颜色
      }
      
      #{$prefix}-inner:after{
        transform: rotate(45deg) scale(1);   
        position: absolute;
        display: table;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        content: ' ';
        transition: all .2s  cubic-bezier(0.12, 0.4, 0.29, 1.46) .1s;
      } 
    }

    // 半选状态
    &-indeterminate {
      #{$prefix}-inner:after {
        content: ' ';
        transform: scale(1);
        position: absolute;
        left: 50%;
        top: 50%;
        width: 0px;
        height: 0px;
        transform: translate(-50%,-50%);
        border:4px solid var(--pseudoElementBackgroundColor) !important;         //半选状态颜色
      }
    }

    // 如果是默认样式 第二个创建的多选框就让他间距8
    &-wrapper{
      cursor: pointer;
      font-size: 12px;
      display: inline-block;
      & + & {
        margin-left: 8px;
      }
      &:hover &-inner,
      &-input:focus + &-inner {
        border-color: pink;
      }
    }
    &-wrapper + span,
    & + span{
      padding-left: 8px;
      padding-right: 8px;
    }

    //无效状态
    &-disabled {
      cursor: not-allowed;
  
      #{$prefix}-checked {   //关闭选中动画
        #{$prefix}:after {
          animation-name: none;
          border-color: #000000;
        }
      }
  
      #{$prefix}-input {
        cursor: not-allowed;   //无法选择手势
      }
  
      #{$prefix}-inner {
        border-color: gray!important;                     //无效状态的边框颜色
        background-color: rgba(128, 128, 128, 0.205);      //无效状态的背景颜色
        &:after {
          animation-name: none;
          border-color:rgb(45, 168, 162);
        }
      }
    }

    //多选框的组样式
    &-group{   
      font-size: $font-size-base;
      &-item {
        display: inline-block;
        margin-right: 8px;
        &:last-child {
          margin-right: 0;
        }
      }
      &-item + &-item {
        margin-left: 0;
      }
    }
}

@keyframes emCheckboxEffect {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
